<script setup lang="ts">
import { downloadContract, getEnterpriseDetailAPI } from '@/apis/enterprise';
import type { EnterpriseDetail, Rent } from '@/types/enterprise';
import { ref } from 'vue';
import { useRoute } from 'vue-router';



const route = useRoute()
const detail = ref<EnterpriseDetail>({} as EnterpriseDetail)
 
const getDetail = async () => {
    if(route.params.id){
        const res = await getEnterpriseDetailAPI(route.params.id as string)
        detail.value = res.data
    }
}
getDetail()

const getPreviewUrl = (url: string) => {
    // 从链接中提取文件扩展名
    const extName = url.split('.').pop()
    // 如果是 pdf 可直接预览 
    if (extName === 'pdf') {
        return url
    }
    // 如果是 doc 或 docx 可通过微软提供的在线预览服务预览
    else if (extName === 'doc' || extName === 'docx') {
        // 微软提供的在线预览服务
        const previewURL = "https://view.officeapps.live.com/op/view.aspx?src=";
        // 返回拼接后的链接 通过encodeURIComponent编码中文等特殊字符
        return previewURL + encodeURIComponent(url)
    }
}

const downloadFile = async (row: Rent) => {
    // 根据附件 id 下载文件，返回二进制的 blob 数据
    const blobData = await downloadContract(row.contractId)
    // 创建一个 a 标签
    const aElement = document.createElement('a')
    // 设置 href 属性为 blob 数据的 URL
    aElement.href = URL.createObjectURL(blobData)
    // 设置 download 属性为合同文件名
    aElement.download = row.contractName
    // 点击 a 标签，触发下载
    aElement.click()
    // 释放内存
    URL.revokeObjectURL(aElement.href)
    aElement.remove()
}
</script>

<template>
    <div class="detail-enterprise">
        <header class="add-header">
            <el-page-header content="查看企业" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">租赁记录</div>
                <div class="table-container">
                    <el-table :data="detail.rent" style="width: 100%" border>
                        <el-table-column type="index" label="序号" width="50" />
                        <el-table-column prop="name" label="租赁楼宇" width="180" />
                        <el-table-column label="租赁起止时间" width="280">
                            <template #default="{ row }">
                                {{ row.startTime }} - {{ row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="租赁合同(点击预览)">
                            <template #default="{ row }">
                                <el-button type="primary" link>
                                    <!-- target="_blank"  新建标签页预览 -->
                                    <a :href="getPreviewUrl(row.contractUrl)" target="_blank">
                                        {{ row.contractName }}
                                    </a>
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="录入时间" />
                        <el-table-column prop="address" label="操作">
                            <template #default="{row}">
                                <el-button @click="downloadFile(row)" type="primary" link>合同下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </main>

    </div>
</template>


<style scoped lang="scss">

.detail-enterprise {
// 微调链接样式
    .link {
        // 取消下划线
        text-decoration: none;
        // inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性
        color: inherit;
    }
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;
            margin-bottom: 20px;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }
        }

        .table-container {
            padding: 20px;
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }
}

</style>